<template>
  <div class="container">
    <a-card title="Excel操作" style="width: 400px">
      <a-space direction="vertical" style="width: 100%">
        <h1>Excel操作页面</h1>
        <a-button type="primary" @click="handleDesign">设计Excel模板</a-button>
        <a-button type="primary" @click="handleModifyTemplate">修改Excel模板</a-button>
        <a-button type="primary" @click="handleFill">Excel模板填写</a-button>
        <a-button type="primary" @click="handleView">查看Excel</a-button>
      </a-space>
    </a-card>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const handleDesign = () => {
    router.push({
      path: '/excel',
      query: { type: 'design' },
    });
  };

  const handleModifyTemplate = () => {
    router.push({
      path: '/excel',
      query: { type: 'modify-template' },
    });
  };

  const handleFill = () => {
    router.push({
      path: '/excel',
      query: { type: 'fill' },
    });
  };

  const handleView = () => {
    router.push({
      path: '/excel',
      query: { type: 'view' },
    });
  };
</script>

<style scoped>
  .container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
  }
</style>
